<template>
	<cover-view class="tab-bar">
		<cover-view class="tab-bar-border"></cover-view>
		<cover-view v-for="(item,index  ) in list" :key="index" class="tab-bar-item"  :data-path="item.pagePath"
			:data-index="index"  @click="switchTab">
			<cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
			<cover-view :style="color,selected === index ? selectedColor : color">{{item.text}}</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs
	} from 'vue'


	export default {
		setup() {
			let data = reactive({
				selected: 0,
				color: "#7A7E83",
				selectedColor: "#3cc51f",
				list: [{
					pagePath: "/pages/admin/admin",
					iconPath: "/static/image/icon_component.png",
				    selectedIconPath: "/static/image/icon_component_HL.png",
			 	    text: "组件"
				}, {
					pagePath: "/pages/myuser/myuser",
					iconPath: "/static/image/icon_API.png",
					selectedIconPath: "/static/image/icon_API_HL.png",
					text: "接口"
				}],
				
				switchTab(e) {
					const date = e.currentTarget.dataset
					data.selected= date.index;
					const url = date.path
					uni.switchTab({
						url
					});	
					
					
				}
			});
		
			return {
				...toRefs(data)
			};
		},

		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 48px;
		background: white;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-border {
		background-color: rgba(0, 0, 0, 0.33);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		transform: scaleY(0.5);
	}

	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tab-bar-item cover-image {
		width: 27px;
		height: 27px;
	}

	.tab-bar-item cover-view {
		font-size: 10px;
	}
</style>
